<template>
  <div>
    <!-- 按钮标题 -->
    <div class="title">
      <!-- <h4>芙蓉楼送辛渐</h4> -->
      <slot></slot>
      <span class="btn" @click="isShow = !isShow">
        {{ isShow ? "收起" : "展开" }}
      </span>
    </div>
    <!-- 下拉内容 -->
    <div class="container" v-show="isShow">
      <!-- <p>寒雨连江夜入吴,</p>
      <p>平明送客楚山孤。</p>
      <p>洛阳亲友如相问，</p>
      <p>一片冰心在玉壶。</p> -->
      <!-- 
          需求：当我们封装组件的时候，我们标签结构不确定的时候，改如何封装？
          答：vue专门提供了插槽给我们实现这个功能，这个插槽就是vue内置的slot标签
          如何使用slot标签呢？
          答：1、在封装组件的地方，直接用slot标签替代想要显示的标签结构
              2、使用该组件的时候，在闭合标签中插入真正想要显示的标签结构即可
              渲染结果：slot标签被插入的标签结构替换掉显示在页面中
       -->
       <!-- 设置默认内容：直接在slot标签内添加你想要显示的内容即可 -->
      <slot>我是默认内容</slot>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      isShow: false,
    };
  },
};
</script>


<style scoped>
h3 {
  text-align: center;
}


.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ccc;
  padding: 0 1em;
}


.title h4 {
  line-height: 2;
  margin: 0;
}


.container {
  border: 1px solid #ccc;
  padding: 0 1em;
}


.btn {
  /* 鼠标改成手的形状 */
  cursor: pointer;
}


img {
  width: 50%;
}
</style>